<template>
  <div>
    <el-row>
      <el-col :span="12"
        ><div
          class="grid-content bg-purple"
          :style="{ width: '400px', height: '400px', marginTop: '40PX' }"
          ref="chart"
        ></div
      ></el-col>
      <el-col :span="12">
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择开始日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <el-date-picker
            v-model="value2"
            type="date"
            placeholder="选择结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <el-select v-model="keshi" placeholder="请选择科室" @change="keshis">
          <el-option
            v-for="item in keshiData"
            :key="item.subjectNo"
            :label="item.subjectName"
            :value="item.subjectNo"
          >
          </el-option>
        </el-select>
        <div
          class="grid-content bg-purple-light"
          :style="{ width: '480px', height: '400px' }"
          ref="chart1"
        ></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24"
        ><div
          class="grid-content bg-purple-dark"
          :style="{ width: '1000px', height: '500px', marginTop: '60PX' }"
          ref="chart2"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapActions } from "vuex";
// import { URL } from "../../../../utils/fanapi";
// 引入echart
let Echarts = require("echarts/lib/echarts"); //基础实例
require("echarts/lib/chart/bar"); //按需引入 bar = 柱状图

export default {
  data() {
    return {
      chart: null, //图表实例
      chart1: null,
      chart2: null,
      time: ["第一季度", "第二季度", "第三季度", "第四季度"],
      beginDte: ["2021-05-01", "2021-05-08", "2021-05-15", "2021-05-22"],
      lastDate: ["2021-05-07", "2021-05-14", "2021-05-21", "2021-06-15"],
      value1: "",
      value2: "",

      danwei: [], //每个季度单位负担总金额数据
      geren: [], //每个季度单位负担总金额数据

      keshiData: [], //获取的所有科室数据
      keshi: "", //把需要的东西放进option
      chufnu: "", //该科室的处方总张数
      yaonu: "", //该科室的药品总数量
      moneynu: "", //该科室的销售总金额

      //挂号和计价收费汇总： "挂号人次", "总挂号费", "计价处方张数", "笔数", "总金额"
      rencinu: [],
      guanu: [],
      jijiachufnu: [],
      bishunu: [],
      zongjine: [],
    };
  },
  watch: {
    danwei: {
      deep: true, //深度监听
      handler(val, oldval) {
        val && this.drawLine();
      },
    },
    geren: {
      handler(val, oldval) {
        val && this.drawLine();
      },
    },
    chufnu: {
      handler(val, oldval) {
        val && this.init();
      },
    },
    yaonu: {
      handler(val, oldval) {
        val && this.init();
      },
    },
    moneynu: {
      handler(val, oldval) {
        val && this.init();
      },
    },
    rencinu: {
      handler(val, oldval) {
        val && this.init2();
      },
    },
    guanu: {
      handler(val, oldval) {
        val && this.init2();
      },
    },
    jijiachufnu: {
      handler(val, oldval) {
        val && this.init2();
      },
    },
    bishunu: {
      handler(val, oldval) {
        val && this.init2();
      },
    },
    zongjine: {
      handler(val, oldval) {
        val && this.init2();
      },
    },
  },
  created() {
    this.getkeshiData();
    this.reqtwo();
  },
  mounted() {
    // 在mounted生命周期函数中实例化echarts对象
    this.reqone();
    this.reqtwo();
    this.reqthree();
    this.$nextTick(() => {
      this.drawLine();
      this.init();
      this.init2();
    });
  },
  methods: {
    ...mapActions(["tongyong"]),
    drawLine() {
      //初始化echarts实例
      if (this.chart != null && this.chart != "" && this.chart != undefined) {
        this.chart.dispose();
      }
      this.chart = Echarts.init(this.$refs.chart);
      // 配置数据
      let optionData = {
        title: { text: "医药费统计" },
        legend: {
          data: ["单位负担总金额", "个人负担总金额"],
          right: "2%",
        },
        xAxis: {
          type: "category",
          data: this.time,
        }, //X轴
        yAxis: { type: "value" }, //Y轴
        series: [
          {
            name: "单位负担总金额",
            data: this.danwei,
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
          },
          {
            name: "个人负担总金额",
            data: this.geren,
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
          },
        ], //配置项
      };
      // 4.传入数据
      this.chart.setOption(optionData);
    },
    init() {
      if (
        this.chart1 != null &&
        this.chart1 != "" &&
        this.chart1 != undefined
      ) {
        this.chart1.dispose();
      }
      this.chart1 = Echarts.init(this.$refs.chart1, "");
      let option = {
        title: { text: "各科室看病情况统计" },
        xAxis: {
          type: "category",
          data: ["处方张数", "药品总数", "总金额"],
          axisLabel: {
            fontFamily: "微软雅黑",
            color: "#d48265",
            fontSize: "18",
          },
        },
        yAxis: { type: "value" }, //Y轴
        series: [
          {
            data: [this.chufnu, this.yaonu, this.moneynu],
            type: "bar",
            barWidth: "25%",
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              color: function(params) {
                var colorList = ["#FAC858", "#2f4554", "#d48265"];
                return colorList[params.dataIndex];
              },
            },
          },
        ],
      };
      this.chart1.setOption(option);
      console.log(this.value2);
    },
    init2() {
      if (
        this.chart2 != null &&
        this.chart2 != "" &&
        this.chart2 != undefined
      ) {
        this.chart2.dispose();
      }
      this.chart2 = Echarts.init(this.$refs.chart2);
      let option = {
        title: { text: "挂号和计价收费汇总记录表" },
        legend: {
          data: ["挂号人次", "总挂号费", "计价处方张数", "笔数", "总金额"],
          right: "2%",
        },
        xAxis: {
          type: "category",
          data: [
            `${this.beginDte[0]}~${this.lastDate[0]}`,
            `${this.beginDte[1]}~${this.lastDate[1]}`,
            `${this.beginDte[2]}~${this.lastDate[2]}`,
            `${this.beginDte[3]}~${this.lastDate[3]}`,
          ],
        },
        yAxis: { type: "value" }, //Y轴
        series: [
          {
            type: "bar",
            name: "挂号人次",
            data: this.rencinu,
            label: {
              show: true,
              position: "top",
            },
          },
          {
            type: "bar",
            name: "总挂号费",
            data: this.guanu,
            label: {
              show: true,
              position: "top",
            },
          },
          {
            type: "bar",
            name: "计价处方张数",
            data: this.jijiachufnu,
            label: {
              show: true,
              position: "top",
            },
          },
          {
            type: "bar",
            name: "笔数",
            data: this.bishunu,
            label: {
              show: true,
              position: "top",
            },
          },
          {
            type: "bar",
            name: "总金额",
            data: this.zongjine,
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      };
      this.chart2.setOption(option);
    },
    //医药费统计表获取数据
    reqone() {
      // console.log(this.danwei);
      for (let i = 1; i < 5; i++) {
        /*this.$axios
          .post(
            URL +
              "/zsdx-outpatient-service/menzhen/doctor/select/moneyBy3Month/" +
              i
          )
          .then((data) => {
            if (data.data.msg != "success") {
              this.danwei.push(0);
              this.geren.push(0);
            } else {
              this.danwei.push(data.data.data.inSideMoney);
              this.geren.push(data.data.data.outSideMoney);
            }
          });*/
        this["tongyong"](i, {
          name: "TONGJI_YAOFEI",
          data: {},
        }).then((data) => {
          if (data.data.msg != "success") {
            this.danwei.push(0);
            this.geren.push(0);
          } else {
            this.danwei.push(data.data.data.inSideMoney);
            this.geren.push(data.data.data.outSideMoney);
          }
        });
      }
    },
    //渲染Subject_name科室选择
    getkeshiData() {
      // this.$axios({
      // url: URL + "/zsdx-outpatient-service/menzhen/subject/select/selectAll",
      // method: "post",
      // data: { page: 1, pageSize: 50 },
      // }).then((data) => {
      // console.log(data.data.data);
      // this.keshiData = data.data.data;
      // });
      this["tongyong"]({
        name: "KEMU_XUANRAN",
        data: { page: 1, pageSize: 50 },
      }).then((data) => {
        console.log(data.data.data);
        this.keshiData = data.data.data;
      });
    },
    keshis() {
      this.keshiData.No = this.keshi;
      console.log(this.keshiData.No);
      this.reqtwo();
    },
    //各科室看病情况表获取数据
    reqtwo() {
      console.log(this.keshiData.No);
      /*this.$axios({
        url:
          URL +
          "/zsdx-outpatient-service/menzhen/doctor/select/subjectBy3Month",
        method: "post",
        data: {
          no: this.keshiData.No,
          beginDte: this.value1,
          lastDate: this.value2,
        },
      }).then((data) => {
        console.log(data.data.data);
        if (data.data.msg != "success") {
          this.chufnu = 0;
          this.yaonu = 0;
          this.moneynu = 0;
        } else {
          this.chufnu = data.data.data.billNo;
          this.yaonu = data.data.data.quantity;
          this.moneynu = data.data.data.mediMoney;
          console.log(this.chufnu);
        }
      });*/
      this["tongyong"]({
        name: "TONGJI_KESHI",
        data: {
          no: this.keshiData.No,
          beginDte: this.value1,
          lastDate: this.value2,
        },
      }).then((data) => {
        console.log(data.data.data);
        if (data.data.msg != "success") {
          this.chufnu = 0;
          this.yaonu = 0;
          this.moneynu = 0;
        } else {
          this.chufnu = data.data.data.billNo;
          this.yaonu = data.data.data.quantity;
          this.moneynu = data.data.data.mediMoney;
          console.log(this.chufnu);
        }
      });
    },
    //挂号收费汇总记录
    reqthree() {
      for (let i = 0; i < 4; i++) {
        /* this.$axios({
          url: URL + "//zsdx-outpatient-service/menzhen/doctor/select/getReg",
          method: "post",
          data: {
            beginDte: this.beginDte[i],
            lastDate: this.lastDate[i],
          },
        }).then((data) => {
          // console.log(data);
          if (data.data.msg != "success") {
            this.rencinu.push(0);
            this.guanu.push(0);
            this.jijiachufnu.push(0);
            this.bishunu.push(0);
            this.zongjine.push(0);
          } else {
            this.rencinu.push(data.data.data.billNo);
            this.guanu.push(data.data.data.mediMoney);
            this.jijiachufnu.push(data.data.data.quantity);
            this.bishunu.push(data.data.data.number);
            this.zongjine.push(data.data.data.money);
          }
          //  console.log(this.rencinu, this.guanu);
          //  console.log(this.jijiachufnu, this.bishunu, this.zongjine);
        });*/
        this["tongyong"]({
          name: "TONGJI_HUIZONG",
          data: {
            beginDte: this.beginDte[i],
            lastDate: this.lastDate[i],
          },
        }).then((data) => {
          // console.log(data);
          if (data.data.msg != "success") {
            this.rencinu.push(0);
            this.guanu.push(0);
            this.jijiachufnu.push(0);
            this.bishunu.push(0);
            this.zongjine.push(0);
          } else {
            this.rencinu.push(data.data.data.billNo);
            this.guanu.push(data.data.data.mediMoney);
            this.jijiachufnu.push(data.data.data.quantity);
            this.bishunu.push(data.data.data.number);
            this.zongjine.push(data.data.data.money);
          }
        });
      }
    },
  },
};
</script>
<style lang="less" scoped></style>
